<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="assets">
					<div class="top">
						<div class="top_title">我的资产</div>
						<!-- <div class="top_count">
							<p>{{parseFloat(AIDT).toFixed(5).slice(0,-1)}} AIDT</p>
							<p>&asymp;{{parseFloat(cny).toFixed(5).slice(0,-1)}} CNY</p>
						</div> -->
						<div class="top_my">
							<div style="text-align: right;">
								<img src="../assets/images/Assets-1.png" width="30" @click="$router.push({name:'My'})">
							</div>
							<!-- <p style="color: rgb(132, 140, 171);">全球加权总奖池</p>
							<p style="text-align: right;">
								<span v-text="parseFloat(poolNum).toFixed(5).slice(0,-1)" style="font-size: 13px;"></span>
								<span>ATM</span>
							</p> -->
						</div>
					</div>
					<div class="mid">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<!-- <div class="swiper-slide" v-for="(item,index) of accounts" :key="index" :style="{background:item.bg,background:item.bg2}">
									<div class="card" :class="'card' + index">
										<div class="card_top" v-show="index != 3">
											<p v-text="item.name"></p>
											<p>{{parseFloat(item.availableNum).toFixed(5).slice(0,-1)}} AIDT</p>
											<p>折合 &asymp; {{parseFloat(item.cny1).toFixed(5).slice(0,-1)}} CNY</p>
										</div>
										<div class="card_top" v-show="index == 3">
											<p v-text="item.name"></p>
											<p>{{parseFloat( item.freezeNum).toFixed(5).slice(0,-1)}} ATM</p>
											<p>折合 &asymp; {{parseFloat(item.cny2).toFixed(5).slice(0,-1)}} AIDT</p>
										</div>

									</div>
								</div> -->
								
								<div class="swiper-slide" style="background-image:url(../assets/images/Assets-2.png);background:linear-gradient(#b168ff, #796bff);background:-webkit-linear-gradient(#b168ff, #796bff)">
									<div class="card" :class="'card' + index">
										<div class="card_top">
											<p>可用账户</p>
											<p>{{parseFloat(AIDT1).toFixed(5).slice(0,-1)}} AIDT</p>
											<p>折合 &asymp; {{parseFloat(cny1).toFixed(5).slice(0,-1)}} CNY</p>
										</div>
									</div>
								</div>
								<div class="swiper-slide" style="background-image:url(../assets/images/Assets-5.png);background:linear-gradient(#ff7153, #feb278);background:-webkit-linear-gradient(#ff7153, #feb278)">
									<div class="card" :class="'card' + index">
										<div class="card_top">
											<p>锁仓账户</p>
											<p>{{parseFloat(AIDT2).toFixed(5).slice(0,-1)}} AIDT</p>
											<p>折合 &asymp; {{parseFloat(cny2).toFixed(5).slice(0,-1)}} CNY</p>
										</div>
									</div>
								</div>


								</div>
							</div>
					</div>
					</div>
					<div class="btm">
						<van-tabs v-model="active" background="transparent" color="#525fd6" title-inactive-color="#848cab" title-active-color="#FFFFFF" swipeable animated>
							<van-tab title="账户流水">
								<div class="btm_card">
									<div v-show="list.length">
										<van-row class="assetDate">
											<van-col span="10">日期</van-col>
											<van-col span="8">数量</van-col>
											<van-col span="6">类型</van-col>
										</van-row>
										<div class="weui-flex vux-1px-b" v-for="(item,index) of list" :key="index">
											<div class="weui-flex__item">
												<van-row class="assetDate b0">
													<van-col span="10">{{item.dateTime}}</van-col>
													 <!-- v-show="activeIndex == 0" -->
													  <!-- v-if="this.numss == 0" -->
													<van-col span="8" v-show="item.detailType == 1" style='color:rgb(48, 198, 148)'>+{{item.num}}</van-col>
													<van-col span="8" v-show="item.detailType == 2" style='color:red'>-{{item.num}}</van-col>
													<van-col span="6">{{item.type}}</van-col>
												</van-row>
												<!-- <div class="type">{{item.type}}</div>
												<div>{{item.dateTime}}</div> -->
											</div>
											<!-- <div class="val rise2" v-show="item.detailType == 1">+{{item.num}}</div>
											<div class="val fall2" v-show="item.detailType == 2">-{{item.num}}</div> -->
										</div>
										<van-pagination class="page" v-model="current" :total-items="total" :items-per-page="size" :page-count="pages" mode="simple" @change="page(current)" />
									</div>
									<div class="nodata" v-if="!list.length">暂无数据</div>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast, Dialog, Notify } from "vant";
	import { home, safety, mine } from "./../utils/api";
	import { Swiper, SwiperItem, Actionsheet, base64 } from "vux";
	import { encryptDes, decryptDes } from "./../utils/des";
	import Swiper2 from "swiper";
	import "swiper/dist/css/swiper.min.css";
	let _this;
	export default {
		data() {
			return {
				active: 0,
				cny1: 0,
				cny2: 0,
				AIDT1: 0,
				AIDT2: 0,
				index: 1,
				transferNum: [],
				list: [
					// {date:'06-17 15:30',dateTime:'111',type:'ssdsd'},
					// {date:'06-17 15:30',dateTime:'222',type:'ssdsd'},
					// {date:'06-17 15:30',dateTime:'333',type:'ssdsd'}
				],
				size: 10, // 每页数量
				current: 1, // 当前页码
				total: 0, // 总条数
				pages: 12, // 总页数
				tabs: ["资产明细", "账户流水"],
				accounts: [{
						name: "可用账户",
						bg: "linear-gradient(#b168ff, #796bff)",
						bg2: "-webkit-linear-gradient(#b168ff, #796bff)",
						url: "url(../assets/images/Assets-2.png)",
						AIDT: 0,
						cny: 0,
						freezeNum: 0,
						availableNum: 0
					},
					{
						name: "锁仓账户",
						bg: "linear-gradient(#ff7153, #feb278)",
						bg2: "-webkit-linear-gradient(#ff7153, #feb278)",
						url: "url(../assets/images/Assets-5.png)",
						AIDT: 0,
						cny: 0,
						freezeNum: 0,
						availableNum: 0
					}
					// ,
					// {
					// 	name: "OTC账户",
					// 	bg: "linear-gradient(#2194fe, #49d0ff)",
					// 	bg2: "-webkit-linear-gradient(#2194fe, #49d0ff)",
					// 	url: "url(../assets/images/Assets-6.png)",
					// 	AIDT: 0,
					// 	cny: 0,
					// 	freezeNum: 0,
					// 	availableNum: 0
					// },
					// {
					// 	name: "挖矿账户",
					// 	bg: "linear-gradient(#6881ff, #789dfd)",
					// 	bg2: "-webkit-linear-gradient(#6881ff, #789dfd)",
					// 	url: "url(../assets/images/Assets-7.png)",
					// 	AIDT: 0,
					// 	cny: 0,
					// 	freezeNum: 0,
					// 	availableNum: 0
					// },
					// {
					// 	name: "OTC账户",
					// 	bg: "linear-gradient(#2194fe, #49d0ff)",
					// 	bg2: "-webkit-linear-gradient(#2194fe, #49d0ff)",
					// 	url: "url(../assets/images/Assets-6.png)",
					// 	AIDT: 0,
					// 	cny: 0,
					// 	freezeNum: 0,
					// 	availableNum: 0
					// },
					// {
					// 	name: "挖矿账户",
					// 	bg: "linear-gradient(#6881ff, #789dfd)",
					// 	bg2: "-webkit-linear-gradient(#6881ff, #789dfd)",
					// 	url: "url(../assets/images/Assets-7.png)",
					// 	AIDT: 0,
					// 	cny: 0,
					// 	freezeNum: 0,
					// 	availableNum: 0
					// }
				],
				poolNum: 0
			};
		},
		components: {
			Swiper,
			SwiperItem,
			Actionsheet
		},
		beforeCreate() {
			_this = this;
		},
		created() {},
		mounted() {

			var swiper = new Swiper2(".swiper-container", {
				// effect: "coverflow",
				grabCursor: true,
				centeredSlides: true,
				slidesPerView: "1.05",
				coverflowEffect: {
					rotate: 0,
					stretch: 0,
					depth: 100,
					modifier: 1,
					slideShadows: true
				},
				on: {
					slideChangeTransitionEnd: function() {
						_this.index = this.activeIndex + 1
						_this.bill();
						// _this.accounNum();
						_this.current = 1;
					}
				}
			});
			this.asset();
			// this.totals();
			this.bill();//需要的
			// this.pool();//需要的

			// this.accounNum();//需要的 后台未写

		},
		methods: {
			asset() { //顶部资产
				mine.getAsset()
					.then(res => {
						if(res.code == 200) {
							this.cny1 = res.data.cny1;
							this.cny2 = res.data.cny2;
							this.AIDT1 = res.data.availableNum;
							this.AIDT2 = res.data.freezeNum;
							
						}
					});
			},
			pool() {
				mine.getPool()
					.then(res => {
						if(res.code == 200) {
							this.poolNum = res.data;
						}
					});
			},
			// totals(){
			// 	mine.getWalletAccounts()
			// 		.then(res => {
			// 		if (res.code == 200) {
			// 			for( var i=0; i< res.data.length; i++){
			// 			this.accounts[i].AIDT = res.data[i].AIDT
			// 			this.accounts[i].cny = res.data[i].cny
			// 			this.accounts[i].freezeNum = res.data[i].freezeNum
			// 			this.accounts[i].availableNum = res.data[i].availableNum
			// 			}
			// 		}
			//     });
			// },
			bill() { //账户流水
				let param = this.qs.stringify({
					'id': this.index,
					'current': this.current,
					'size': this.size
				})
				this.axios
					.post(process.env.API_HOST + "my/account_flow", param)
					.then(res => {
						this.list = res.data.data.records;
						this.total = res.data.data.total;
						this.pages = res.data.data.pages;
					});
			},
			// accounNum() {
			// 	//账户数量
			// 	this.axios
			// 		.get(process.env.API_HOST + "my/wallet_account/" + this.index)
			// 		.then(res => {
			// 			if(res.data.code == 200) {
			// 				this.transferNum = res.data.data;
			// 				this.accounts[this.index - 1].AIDT = res.data.data.AIDT
			// 				this.accounts[this.index - 1].cny = res.data.data.cny
			// 				this.accounts[this.index - 1].freezeNum = res.data.data.freezeNum
			// 				this.accounts[this.index - 1].availableNum = res.data.data.availableNum
			// 			}
			// 		});
			// },
			page(current) {
				this.current = current;
				this.bill();
			}
		}
	};
</script>

<style lang="less" scoped>
	// /deep/ [class*=van-hairline]::after{border: 0 solid #525fd6}
	.nodata{padding:30px 0;text-align: center}
	.assets {
		.top {
			position: relative;
			padding: 10px;
			.top_title {
				font-size: 14px;
				margin-bottom: 5px;
			}
			.top_count {
				font-size: 17px;
			}
			.top_my {
				position: absolute;
				right: 20px;
				top: 10px;
			}
		}
		.mid {
			font-size: 16px;
			padding-bottom: 20px;
			.card {
				position: relative;
				.card_top {
					padding: 20px;
					p:first-child {
						margin-bottom: 15px;
					}
				}
				.card_btm {
					display: flex;
					text-align: center;
					padding: 10px 0;
					background: rgba(244, 244, 244, 0.2);
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;
					div {
						flex: 1;
					}
					span {
						position: relative;
						top: 1px;
					}
				}
			}
			.card0 {
				background: url(../assets/images/Assets-2.png);
				background-position: center;
				background-size: cover;
			}
			.card1:after {
				background: url(../assets/images/Assets-5.png);
				background-position: center;
				background-size: cover;
				opacity: 0.5;
				filter: alpha(opacity=50);
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: -1;
			}
			.card2:after {
				background: url(../assets/images/Assets-6.png);
				background-position: center;
				background-size: cover;
				opacity: 0.5;
				filter: alpha(opacity=50);
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: -1;
			}
			.card3 {
				background: url(../assets/images/Assets-7.png);
				background-position: center;
				background-size: cover;
			}
		}
		.btm {
			.btm_card {
				border-top: 1px solid #262b3f;
				// border-bottom: 1px solid #262b3f;
				padding: 10px;
				.btm_title {
					padding: 10px 0;
				}
				.btm_content {
					display: flex;
					div {
						flex: 1;
						p:first-child {
							color: #5f647a;
						}
						p {
							color: #8188a7;
							text-align: center;
						}
					}
					.content_1 {
						p {
							text-align: left;
						}
					}
					.content_3 {
						p {
							text-align: right;
						}
					}
				}
			}
		}
		.swiper-container {
			width: 100%;
		}
		.swiper-slide {
			border-radius: 15px;
			/*background: -webkit-linear-gradient(#b168ff, #796bff);*/
			/* Safari 5.1 - 6.0 */
			/*background: linear-gradient(#b168ff, #796bff);*/
			/* 标准的语法 */
			height: 100%;
			width: 300px;
		}
		.tab_transparent {
			/*visibility: hidden;*/
			display: none;
		}
	}
	.page{padding:0 .3rem;margin-top:15px}
	.assetDate{padding:6px 17px;border-bottom:1px solid #262b3f}
	.assetDate.b0{border-bottom:0px solid #262b3f;padding: 15px 17px}
	.btm /deep/ .van-tab{flex: inherit}
	.btm /deep/ .van-tabs__line{background-color:red}
	/deep/ .van-tabs__wrap {
		right: initial;
		padding-left: 5px
	}
	.weui-flex {
		font-size: 12px;
		// padding-bottom: 10px;
		// margin-bottom: 10px;
		color: #5f647a;
		.type {
			color: #fff;
		}
		.val {
			padding: 8px 0 0;
			font-size: 13px;
		}
	}
	
	/deep/.vux-1px-b:after {
		border-bottom: 1px solid #262b3f !important;
	}
	
	.rise2 {
		color: #30c694;
	}
	
	.fall2 {
		color: #fa4a61;
	}
	
	/deep/.van-pagination__item--disabled,
	.van-pagination__item--disabled:active {}
	
	/deep/.van-pagination__item {
		color: #525fd6;
	}
	
	/deep/.van-pagination__item:active {
		background: #30c694;
		color: #fff;
	}
	/deep/.van-pagination__item{
		background:none !important;
	}
	/deep/.van-tab{
		padding: 0 17px;
	}
</style>